<template>
    <div class="leaderPanel" v-wechat-title="VueTitle">
        <div v-if="loading" class="contentLoad">
            <Spin fix size="large"></Spin>
        </div>
        <template v-else>
            <template v-if="leadList.length">
                <div class="topPanel">
                    <div class="qiansan">
                        <div class="qsPanel">
                            <img :src="imgRequest + leadList[1].avatar" alt="" class="avaImg" v-if="leadList[1].avatar">
                            <img src="@/assets/images/head_default.png" class="avaImg" v-else>                  
                            <div>{{leadList[1].nickname}} <img :src="imgRequest + leadList[1].level.icon" alt=""></div>
                            <div><s class="ybIcon"></s>{{parseInt(leadList[1].bet_money)}}</div>
                            <div class="gzBtn" v-if="leadList[1].is_follow==0" @click="setFollow(leadList[1].user_id,1)">关注</div>
                            <div v-else>已关注</div>
                        </div>
                        <div class="qsPanel">
                            <img :src="imgRequest + leadList[0].avatar" alt="" class="avaImg" v-if="leadList[0].avatar">
                            <img src="@/assets/images/head_default.png" class="avaImg" v-else>                  
                            <div>{{leadList[0].nickname}} <img :src="imgRequest + leadList[0].level.icon" alt=""></div>
                            <div><s class="ybIcon"></s>{{parseInt(leadList[0].bet_money)}}</div>
                            <div class="gzBtn" v-if="leadList[0].is_follow==0" @click="setFollow(leadList[0].user_id,0)">关注</div>
                            <div v-else>已关注</div>
                        </div>
                        <div class="qsPanel">
                            <img :src="imgRequest + leadList[2].avatar" alt="" class="avaImg" v-if="leadList[2].avatar">
                            <img src="@/assets/images/head_default.png" class="avaImg" v-else>                  
                            <div>{{leadList[2].nickname}} <img :src="imgRequest + leadList[2].level.icon" alt=""></div>
                            <div><s class="ybIcon"></s>{{parseInt(leadList[2].bet_money)}}</div>
                            <div class="gzBtn" v-if="leadList[2].is_follow==0" @click="setFollow(leadList[2].user_id,2)">关注</div>
                            <div v-else>已关注</div>
                        </div>
                    </div>
                </div>
                <div class="listPanel">
                    <div class="listBox vux-1px-b" v-for="(item,index) in leadList.slice(3)" :key="index">
                        <div class="listBoxLeft">
                            <div>{{index+4}}</div>
                            <img :src="imgRequest + item.avatar" alt="" v-if="item.avatar">
                            <img src="@/assets/images/head_default.png" alt="" v-else>                  
                            <div>
                                <span>{{item.nickname}}</span> <img :src="imgRequest + item.level.icon" alt="">
                                <div><s class="ybIcon"></s>{{parseInt(item.bet_money)}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="gzBtn1 vux-1px" v-if="item.is_follow==0" @click="setFollow(item.user_id,index+3)">关注</div>
                            <div v-else class="ygz">已关注</div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="noData" v-else>
                <img src="@/assets/images/no-content.png" alt="">
            </div>
        </template>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data () {
    return {
        leadList: [],
        token: localStorage.getItem('token'),
        VueTitle:'英雄榜',

        loading: false,
    }
  },

  created () {

  },
  mounted() {
      this.getLeadList()
      if (this.accountData.is_tourist && this.accountData.is_tourist != 1) {
            this.isTourist = false;
        } else {
            this.isTourist = true;
        }
  },
  computed: {
    
  },
  methods: {
        getLeadList: function() {
            this.loading = true;
            this.$http.post(this.urlRequest + "?m=api&c=user&a=bet_rank",{token: this.token}).then(res => {
                this.loading = false;
                if (res.data.status == 0) {
                    this.leadList = res.data.data
                } else {
                    this.$Message.success(res.data.ret_msg);
                }
            })
        },
        setFollow: function(id, index) {
            if (!JSON.parse(localStorage.getItem("isUser"))) {
				this.$Message.info('游客不能关注！')
				return
			}
            this.$http.post(this.urlRequest + "?m=api&c=user&a=addFollowUser", {user_id:id,token: this.token}).then(res => {
                if (res.data.status == 0) {
                    this.leadList[index].is_follow = 1
                    this.$Message.success(res.data.ret_msg)
                } else {
                    this.$Message.info(res.data.ret_msg)
                }
            })
        }
    },
    watch: {
        
    },
}
</script>

<style scoped>
.loading{
    display: inline-block;
    height: 600px;
    width: 100%;
    position: relative;
    border: 1px solid #eee;
}
.leaderPanel{width: 1200px;margin: 20px auto;}
/* .topPanel{background: url(../../../../assets/images/room/topBg.png)no-repeat;background-size: 100% 100%;min-height: 400px;display: flex;justify-content: center;} */
.topTitle{text-align: center;color: #FFEC83;height: 1rem;display: flex;align-items: center;justify-content: center;}
.topTitle .leftArrow{position: absolute;left: .2rem;fill: #fff;top: .2rem;}
.qiansan{display: flex;width: 600px;font-size: 18px}
.qiansan>div{width: 33.3333%;text-align: center;color: white;}
.qiansan>div:nth-child(1){margin-top: 110px;}
.qiansan>div:nth-child(2){margin-top: 50px;}
.qiansan>div:nth-child(3){margin-top: 110px;}
.qsPanel>div{display: flex;align-items: center;margin-top: 10px;justify-content: center;}
.qsPanel>div img{width: 56px;height: 20px;}
.avaImg{width: 80px;height: 80px;border-radius: 50%;display: block;margin: 0 auto;}
/* .ybIcon{background: url(../../../../assets/images/room/ybIcon.png)no-repeat;background-size: 100% 100%;height: 12px;width:16px;display: inline-block;margin: 0px 0.18rem} */
.gzBtn{width: 80px;margin: 0 auto;border-radius: 2rem;border: 1px solid #fff;cursor: pointer;font-size: 16px}
.gzIcon{fill: #fff;}
.gzBtn1{width: 80px;margin: 0 auto;color: #D32727;display: flex;align-items: center;justify-content: center;border-radius: 2rem;border: 1px solid #D32727;font-size: 16px;cursor: pointer;}
.listPanel{width: 700px; min-height: 300px; margin: 0 auto;}
.listBox{display: flex;justify-content: space-between;padding: 15px 0px;align-items: center;border-bottom: 1px solid #ccc;}
.listBox>div{display: flex;justify-content: space-between;align-items: center;}
.listBoxLeft>div:first-child{text-align: center;width: 40px;font-size: 21px;}
.listBoxLeft>img{width: 55px;height: 55px;border-radius: 50%;margin: 0px 10px;}
.listBoxLeft>div>img{width: 50px;height: 16px;}
.listBoxLeft>div>span{display: inline-block;font-size: 18px;}
.listBoxLeft>div>div{color: #D22727;font-size: 18px;}
.ygz{color: #9f9f9f;width: 80px;text-align: center;font-size: 16px;}

.contentLoad .ivu-spin-fix {
    width: 100%;
    height: 700px;
    position: relative;
    background: none;
}
.noData { height: 700px;position: relative; }
.noData img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)}
</style>



// WEBPACK FOOTER //
// src/components/room/chatRoom/leaderBoard/leaderBoard.vue